<%@ page contentType="text/html;charset=UTF-8" language="java" %>  
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>酒店信息展示</title>  
    <style>  
        body {  
            font-family: 'Arial', sans-serif;  
            margin: 0;  
            padding: 0;  
            background-color: #f5f5f5;  
        }  
          
        .header {  
            background-color: #003377;  
            color: #fff;  
            text-align: center;  
            padding: 20px;  
        }  
          
        .header h1 {  
            margin: 0;  
            font-size: 36px;  
        }  
          
        .container {  
            max-width: 1200px;  
            margin: 0 auto;  
            padding: 20px;  
            background-color: #fff;  
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
        }  
          
        .hotel-list {  
            display: flex;  
            flex-wrap: wrap;  
            justify-content: space-around;  
        }  
          
        .hotel-item {  
            width: 300px;  
            margin: 10px;  
            background-color: #f9f9f9;  
            border-radius: 5px;  
            overflow: hidden;  
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
        }  
          
        .hotel-item img {  
            width: 100%;  
            height: auto;  
            display: block;  
        }  
          
        .hotel-info {  
            padding: 15px;  
        }  
          
        .hotel-info h2 {  
            margin: 0 0 10px 0;  
            font-size: 20px;  
        }  
          
        .hotel-info p {  
            margin: 0;  
            font-size: 16px;  
        }  
          
        .hotel-info a {  
            display: inline-block;  
            margin-top: 10px;  
            padding: 5px 10px;  
            background-color: #003377;  
            color: #fff;  
            text-decoration: none;  
            border-radius: 3px;  
        }  
          
        .hotel-info a:hover {  
            background-color:#DDDDDD;  
        }  
          
        @media (max-width: 768px) {  
            .hotel-item {  
                width: 100%;  
            }  
        }  
    </style>  
</head>  
<body>  
<div class="header">  
    <h1>酒店信息展示</h1>  
</div>  
  
<div class="container">  
    <div class="hotel-list">  
        <!-- 这里是动态生成的酒店列表，以下仅为示例 -->  
        <div class="hotel-item">  
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.bXMXok8d3dThyb_VvCWplAHaFj?rs=1&pid=ImgDetMain" alt="成都梦之旅文君楼庭院酒店（宽窄巷子店）图片">  
            <div class="hotel-info">  
                <h2>成都梦之旅文君楼庭院酒店（宽窄巷子店）</h2>  
                <p>清代的仿古街道，中式庭院，飞檐回廊，雅致温馨。</p>  
                <a href="hotel1-details.jsp">查看详情</a>  
            </div>  
             <br>
             <br>
             <br>
             
            <hr>
            <br>
             <img src="https://ts1.cn.mm.bing.net/th/id/R-C.f4248d3b60c2fc44c641312e23a3edf2?rik=oG%2f1l%2b4D6Hkqvw&riu=http%3a%2f%2fwww.cdrenju.com%2fUploadfiles%2fPicture%2f2020-5-18%2f20205181629545988.jpg&ehk=9oJL9kfGOw5hMSTCbsewDIentgtu28djpDhDIzzyk2c%3d&risl=&pid=ImgRaw&r=0" alt="成都盛美利亚酒店图片"> 
            <div class="hotel-info">  
                <h2>成都盛美利亚酒店</h2>  
                <p>成都盛美利亚酒店位置便利，坐落于武侯区，距离武侯祠有9.1公里，距离天府广场有11公里。客人可以使用室内泳池、健身中心、桑拿房和热水浴池。</p>  
                <a href="hotel2-details.jsp">查看详情</a>          
            </div> 
            </div>
     
        <div class="hotel-item">  
           
           
             <img src="https://dimg04.c-ctrip.com/images/1mc3c12000c166su99314_W_1080_808_R5_D.jpg" alt="成都玉林华西亚朵酒店"> 
            <div class="hotel-info">  
                <h2>成都玉林华西亚朵酒店</h2>  
                <p>成都玉林华西亚朵酒店距离成都世纪城新国际会展中心有11公里，距离成都大熊猫繁育研究基地有16公里。最近的机场是成都双流国际机场，距离这家住宿有15公里。</p>  
                <a href="hotel3-details.jsp">查看详情</a>  
        </div>  
         <br>
            <hr>
            <br>
         <img src="https://ac-a.static.booking.cn/xdata/images/hotel/max1024x768/500309549.jpg?k=2f15bd4ae53522afa3d728a632d219f6fd27c68bbfa44bc5e9c7f5f4e54e9b76&o=&hp=1" alt="成都富力丽思卡尔顿酒店图片">  
            <div class="hotel-info">  
                <h2>成都富力丽思卡尔顿酒店</h2>  
                <p>工作人员友好，地理位置优越，设施现代化，游泳池和健身房都很棒</p>  
                <a href="hotel4-details.jsp">查看详情</a>  
            </div>
        </div>  
        
        
          <div class="hotel-item">  
           <br>
           <br>
           <br>
           <br>
           <br>
           <br>
           <br>
           <br>
           <br>
           
           
             <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C._J3PhMaDJFoYRrMIv97yugAAAA?rs=1&pid=ImgDetMain" alt="成都盛捷江畔服务公寓"> 
            <div class="hotel-info">  
                <h2>成都盛捷江畔服务公寓</h2>  
                <p>成都盛捷江畔服务公寓位于锦江之滨，提供享有优美河景的服务式公寓，设有设施齐全的健身房、休息室以及带烧烤区的屋顶花园。</p>  
                <a href="hotel5-details.jsp">查看详情</a>  
        </div>  
       </div>
        
       
        </div>
        </div>
     
           
     
        
          
        <!-- 更多酒店项 -->  
    

  
</body>  
</html>
